import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React from 'react';
import type { DetailItem } from '../data';
import { Col, Row, Tag } from 'antd';
import { updateAdminRoleAccesses } from '../service';
import AuthPermissionConfiguration from '@/pages/Auth/AuthRole/components/AuthPermissionConfiguration';

const LockerDetail: React.FC<{
  id?: string;
  request: (id: string) => Promise<{ success: boolean; data?: DetailItem }>;
  reloadFunc: () => void;
}> = ({ id = '', request, reloadFunc }) => {
  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '名称',
      dataIndex: 'name',
    },
    {
      label: '编号',
      dataIndex: 'id',
    },
    {
      label: '权限',
      dataIndex: 'permissions',
      editable: true,
      render: (_, record) => (
        <Row gutter={[16, 8]}>
          {record?.permissions?.map((item) => (
            // eslint-disable-next-line react/jsx-key
            <Col span={12}>
              <Tag key={item.id}>{item.name}</Tag>
            </Col>
          ))}
        </Row>
      ),
      renderEdit: (_, { value, onChange }) => (
        <AuthPermissionConfiguration
          defaultValue={value}
          id={id}
          onChange={(values) => onChange && onChange(values)}
        />
      ),
      onSubmit: async (val) => {
        const res = await updateAdminRoleAccesses({
          roleId: id,
          permissions: val,
        });
        return res.code === 0;
      },
    },
  ];

  return (
    <ProDescriptions
      title="管理员账号角色详情"
      column={2}
      columns={columns}
      params={{ id }}
      request={() => request(id)}
      reloadFunc={reloadFunc}
    />
  );
};

export default LockerDetail;
